<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="./bootstrap-3.4.1/dist/css/bootstrap.css" />

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="./bootstrap-3.4.1/dist/js/bootstrap.js"></script>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .mybox {
      width: 500px;
      margin: auto;
      margin-top: 20px;
    }
    .my-table {
      width: 800px;
      margin: auto;
      margin-top: 50px;
    }
    th,
    td {
      text-align: center;
    }
  </style>
  <body>
    <div class="form-horizontal mybox">
      <input
        type="button"
        class="btn btn-default"
        id="add"
        value="添加新用户"
      />

      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
        <div class="col-sm-10">
          <input
            type="text"
            class="form-control"
            id="username"
            placeholder="姓名"
          />
        </div>
      </div>
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">年龄</label>
        <div class="col-sm-10">
          <input
            type="number"
            class="form-control"
            id="age"
            placeholder="年龄"
          />
        </div>
      </div>
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">电话</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="tel" placeholder="电话" />
        </div>
      </div>
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
        <div class="col-sm-10">
          <input
            type="email"
            class="form-control"
            id="email"
            placeholder="Email"
          />
        </div>
      </div>
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">性别</label>
        <label class="radio-inline" style="margin-left: 20px">
          <input type="radio" name="sex" value="男" checked />
          男
        </label>
        <label class="radio-inline">
          <input type="radio" name="sex" value="女" />
          女
        </label>
        <label class="radio-inline">
          <input type="radio" name="sex" value="unknow" />
          未知
        </label>
      </div>
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">民族</label>
        <div class="col-sm-10">
          <input
            type="text"
            class="form-control"
            id="nation"
            placeholder="民族"
          />
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <input type="button" class="btn btn-default" id="sub" value="提 交" />
        </div>
      </div>
    </div>
    <!-- //列表 -->
    <div id="my-list" class="my-table">
      <div style="width: 500px">
        <label for="inputEmail3" class="col-sm-2 control-label">姓名：</label>
        <div class="col-sm-10" style="width: 200px; float: left">
          <input
            type="text"
            class="form-control"
            id="keywords"
            placeholder="姓名"
          />
        </div>
        <input
          type="button"
          class="btn btn-default"
          id="search"
          value="搜 索"
        />
        <br /><br />
      </div>

      <table class="table table-bordered" style="margin-top: 30px">
        <thead>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>电话</th>
            <th>邮箱</th>
            <th>性别</th>
            <th>民族</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </body>
  <script>
    var dataList = [],
      status = 'add', //告诉提交按钮是 编辑还是新增
      thisId = -1
    $(function () {
      showList()
      $('#search').click(function () {
        var keywords = $('#keywords').val()
        if (keywords.length) {
          var arr = dataList.filter(function (item) {
            if (item.username.indexOf(keywords) != -1) {
              return true
            }
          })
          showList(arr)
        } else {
          showList()
        }
      })
      $('#add').click(function () {
        status = 'add'
      })
      //提交或编辑事件
      $('#sub').click(function () {
        var username = $('#username').val(),
          age = $('#age').val(),
          tel = $('#tel').val(),
          email = $('#email').val(),
          sex = $('input[name=sex]:checked').val(),
          nation = $('#nation').val()
        if (status == 'add') {
          dataList.push({
            username: username,
            age: age,
            tel: tel,
            email: email,
            sex: sex,
            nation: nation,
          })
          localStorage.setItem('dataList', JSON.stringify(dataList))
          //找到表格
          showList()
        } else {
          //编辑的逻辑
          dataList[thisId] = {
            username: username,
            age: age,
            tel: tel,
            email: email,
            sex: sex,
            nation: nation,
          }
          localStorage.setItem('dataList', JSON.stringify(dataList))
          showList()
        }
      })
      function showList(arr = []) {
        if (arr.length > 0) {
          dataList = arr
        } else {
          dataList = localStorage.getItem('dataList')
            ? JSON.parse(localStorage.getItem('dataList'))
            : []
        }
        var strHtml = ''
        for (let i in dataList) {
          strHtml += `<tr>
                <td>${dataList[i].username}</td>
                <td>${dataList[i].age}</td>
                <td>${dataList[i].tel}</td>
                <td>${dataList[i].email}</td>
                <td>${dataList[i].sex}</td>
                <td>${dataList[i].nation}</td>
                <td><a href="#" edit='edit' data-id="${i}" >编辑</a> | <a href="#"  data-id="${i}">删除</a></td>
            </tr>`
        }
        $('#my-list tbody').html(strHtml)
      }
      $('tbody').click(function () {
        if (event.target.nodeName == 'A') {
          //编辑
          if ($(event.target).attr('edit') == 'edit') {
            status = 'edit'
            thisId = $(event.target).attr('data-id')
            data = dataList[thisId]
            $('#username').val(data.username),
              $('#age').val(data.age),
              $('#tel').val(data.tel),
              $('#email').val(data.email)
            var num = data.sex == '男' ? 0 : data.sex == '女' ? 1 : 2
            $('input[name=sex]').eq(num).prop('checked', true)
            $('#nation').val(data.nation)
          } else {
            //删除
            dataList.splice($(event.target).attr('data-id'), 1)
            localStorage.setItem('dataList', JSON.stringify(dataList))
            showList()
          }
        }
      })
    })
  </script>
</html>
